<style type="text/css">

  .span5.node-panel {
    margin-top: 5px;
    margin-left: 5px;
  }

  .node-attributes dl {
    margin-top: 5px;
    margin-bottom: 10px;
  }

  .node-attributes dt {
    width: 270px;
  }

  .node-attributes dd {
    margin-left: 280px;
  }

  .node-attributes dd a {
    /** lets make the destination links wrap */
    -ms-word-break: break-all;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }

  ul.viewMenu li {
    padding-left: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  div#pop-up {
    display: none;
    position: absolute;
    color: white;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px 5px 10px;
    -moz-border-radius: 8px 8px;
    border-radius: 8px 8px;
  }

  div#pop-up-title {
    font-size: 15px;
    margin-bottom: 4px;
    font-weight: bolder;
  }

  div#pop-up-content {
    font-size: 12px;
  }

  rect.graphbox {
    fill: #FFF;
  }

  rect.graphbox.frame {
    stroke: #222;
    stroke-width: 2px
  }

  /* only things directly related to the network graph should be here */

  path.link {
    fill: none;
    stroke: #666;
    stroke-width: 1.5px;
  }

  marker.context {
    stroke: red;
    fill: red;
    stroke-width: 1.5px;
  }

  circle.context {
    fill: #0c0;
  }

  circle.route {
    fill: #c0c;
    stroke-width: 1.3px;
  }

  circle.notActive {
    fill: #c00;
  }

  path.link.group {
    stroke: #ccc;
  }

  marker#group {
    stroke: #ccc;
    fill: #ccc;
  }

  circle.group {
    fill: #eee;
    stroke: #ccc;
  }

  circle.destination {
    fill: #bbb;
    stroke: #ccc;
  }

  circle.pinned {
    stroke-width: 4.5px;
  }

  path.link.profile {
    stroke-dasharray: 0, 2 1;
    stroke: #888;
  }

  marker#container {
  }

  circle.container {
    stroke-dasharray: 0, 2 1;
    stroke: #888;
  }

  path.link.container {
    stroke-dasharray: 0, 2 1;
    stroke: #888;
  }

  circle {
    fill: #ccc;
    stroke: #333;
    stroke-width: 1.5px;
    cursor: pointer;
  }

  circle.closeMode {
    cursor: crosshair;
  }

  path.link.destination {
    stroke: #ccc;
  }

  circle.topic {
    fill: #c0c;
  }

  circle.endpoint, circle.endpoints {
    fill: #00c;
  }

  circle.selected {
    stroke-width: 3px;
  }

  .selected {
    stroke-width: 3px;
  }

  text {
    font: 10px sans-serif;
    pointer-events: none;
  }

  text.shadow {
    stroke: #fff;
    stroke-width: 3px;
    stroke-opacity: .8;
  }
</style>


<div class="row-fluid mq-page" ng-controller="Camel.FabricDiagramController">

  <div ng-hide="inDashboard" class="span12 page-padded">
    <div class="section-header">

      <div class="section-filter">
        <input type="text" class="search-query" placeholder="Filter..." ng-model="searchFilter">
        <i class="icon-remove clickable" title="Clear filter" ng-click="searchFilter = ''"></i>
      </div>

      <div class="section-controls">
        <a href="#"
           class="dropdown-toggle"
           data-toggle="dropdown">
          View &nbsp;<i class="icon-caret-down"></i>
        </a>

        <ul class="dropdown-menu viewMenu">
          <!--
                    <li>
                      <label class="checkbox">
                        <input type="checkbox" ng-model="viewSettings.consumer"> Consumers
                      </label>
                    </li>
                    <li>
                      <label class="checkbox">
                        <input type="checkbox" ng-model="viewSettings.producer"> Producers
                      </label>
                    </li>
          -->
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.endpoint"> Endpoint
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.route"> Route
            </label>
          </li>
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.context"> Context
            </label>
          </li>
          <!--
                    <li>
                      <label class="checkbox">
                        <input type="checkbox" ng-model="viewSettings.profile"> Profiles
                      </label>
                    </li>
          -->
          <li>
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.container"> Containers
            </label>
          </li>
          <li class="divider"></li>
          <li title="Should we show the details panel on the left">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.panel"> Details panel
            </label>
          </li>
          <li title="Show the summary popup as you hover over nodes">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.popup"> Hover text
            </label>
          </li>
          <li title="Show the labels next to nodes">
            <label class="checkbox">
              <input type="checkbox" ng-model="viewSettings.label"> Label
            </label>
          </li>
        </ul>

        <!--
                <a ng-href="#/fabric/mq/contexts{{hash}}" title="View the context and container diagram">
                  <i class="icon-edit"></i> Configuration
                </a>
        -->
      </div>
    </div>
  </div>


  <div id="pop-up">
    <div id="pop-up-title"></div>
    <div id="pop-up-content"></div>
  </div>

  <div class="row-fluid">
    <div ng-show="containerCount">
      <div class="{{viewSettings.panel ? 'span7' : 'span12'}} canvas context-canvas">
        <div hawtio-force-graph graph="graph" selected-model="selectedNode" link-distance="150" charge="-600"
             nodesize="10" marker-kind="marker-end"
             style="min-height: 800px">
        </div>
      </div>
      <div ng-show="viewSettings.panel" class="span5 node-panel">
        <div ng-show="selectedNode" class="node-attributes">
          <dl ng-repeat="property in selectedNodeProperties" class="dl-horizontal">
            <dt title="{{property.key}}">{{property.key}}:</dt>
            <dd ng-bind-html-unsafe="property.value"></dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="hero-unit" ng-show="containerCount === 0 && isFmc">
      <p>There are currently no Camel routes running in this fabric</p>

      <p>To try out the EIP browser try create one of the example <a
              href="#/wiki/branch/{{versionId}}/view/fabric/profiles/example/quickstarts">quickstarts</a></p>

      <p hawtio-show object-name="{{managerMBean}}" method-name="createContainers">
        e.g. try creating a container for:
        <a class="btn btn-primary"
           href="#/fabric/containers/createContainer?profileIds=example-quickstarts-cbr&versionId={{versionId}}">
          Content Based Router Quickstart
        </a>
        <a class="btn btn-primary"
           href="#/fabric/containers/createContainer?profileIds=example-quickstarts-eip&versionId={{versionId}}">
          EIP Quickstart
        </a>
      </p>
    </div>
    <div class="hero-unit" ng-show="containerCount === 0 && !isFmc">
      <p>There are currently no Camel routes running in this JVM</p>

      <p>To try out the Camel diagram try create one more Camel routes</p>
    </div>
  </div>

  <div ng-include="'app/fabric/html/connectToContainerDialog.html'"></div>

</div>


